<template>
	<view class="main">
		<view class="content" v-for="v in dataList.list" :key="v.doctorId" @click="goDetails(v.doctorId)">
			<view class="card">
				<view class="icon">
					<!-- <u--image :showLoading="true" :src="log_pic" shape="circle" width="90rpx" height="90rpx"></u--image> -->
					<u-avatar :src="v.avatar" size="45" shape="circle" :default-url="log_pic"></u-avatar>
				</view>
				<view class="intro">
					<view class="name">{{v.doctorName}}<span class="position">{{v.doctorTitleDesc}}</span></view>
					<view class="good_at">{{depDot(v.goodAt,40)}}</view>
				</view>
			</view>
			<!-- <view class="brand">
				<view class="brand_one">
					权威专家
				</view>
				<view class="brand_one brand_blue">
					多点执业
				</view>
				<view class="brand_good_rate">
					<span class="rate_orange">100%</span>好评率
				</view>
				<view class="brand_good_rate">
					<span class="rate_orange">888</span>预约量
				</view>
			</view> -->
			<view class="hosp_box">
				<view v-for="(value,key) in v.placelist" :key="value.doctorId">
					<view class="hosp_list">
						<view class="hosp_list_left">
							<view class="hosp_list_left_num " :class="{organge : key%2 == 0}">
								{{key+1}}
							</view>
							<view class="hosp_list_left_text">
								<view class="hosp_list_left_text_title">
									<span class="hosp_title_brand">{{value.hosLevelDesc}}</span>
									{{value.platHosName}}
								</view>
								<view class="hosp_title_dep">
									{{value.deptName}}
								</view>
							</view>
						</view>
						<view class="hosp_list_right" v-show="value.distance !== null">
							{{value.distance}}km
						</view>
					</view>
					<view class="mark_rightTop" v-if="v.hasHao">
						有号
					</view>
					<view class="mark_rightTop_no" v-if="!v.hasHao">
						无号
					</view>
				</view>
			</view>
		</view>
		<view style="padding-bottom: 180rpx;">
			<u-loadmore :status="pageStatus" v-if="!isList"  />
		</view>
		<view class="empty" v-if="showEmp && isList" >
			<u-empty mode="data" iconSize="140" textSize="18" :icon="emptyList" :text="emptyData"></u-empty>
		</view>

	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	export default {
		name: "doc-list",
		data() {
			return {
				log_pic: require('@/static/icons/yimo.png'),
				emptyList: require('@/static/icons/empty_list.png'), //空列表
				emptyData: '暂无医生信息',
				docSrc: '',
				showEmp: false,
				isList: false,
			};
		},
		methods: {
			goDetails(id) {
				uni.navigateTo({
					url: `/pages/docinfo/docinfo?doctorId=${id}` //假数据
				})
			},
			...mapMutations(['ALLRESET']),
		},
		computed: {
			dataList() {
				//console.log(this.$store.state.doc.doctorList);
				if (this.$store.state.doc.doctorList?.total > 0 && this.$store.state.doc.doctorList?.total !== undefined) {
					this.isList = false
				} else {
					this.isList = true
				}
				//console.log(this.$store.state.doc.doctorList,this.isList,'doctorList')
				return this.$store.state.doc.doctorList
			},
			pageStatus() {
				return this.$store.state.doc.pageStatus
			},
			isCount() {
				//console.log(this.$store.state.doc.totalCount < 5);
				if (this.$store.state.doc.totalCount < 5) {
					return false
				} else {
					return true
				}
			},
			depDot() {
				return (value, number) => {
					if (value && value.length > number) {
						let res = ''
						res = value.slice(0, number) + '...'
						return res
					}
					return value
				}
			},
			hasHao() {
				//console.log(this.$store.state.doc.hasHao);
				return this.$store.state.doc.hasHao
			}
		},
		watch:{
			'$store.state.doc.frozen':{
				handler(ne,ol){
					this.showEmp = ne
					//console.log(ne,123);
				},
				immediate:true
				//state.frozen = 2
			}
			
		},
		mounted() {
			this.ALLRESET()
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background-color: #F5F6F8;
		padding-bottom: 100rpx;
		//padding-top: 24rpx;
		.content {
			background-color: #fff;
			padding-bottom: 30rpx;
			padding-left: 30rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			position: relative;
			.card {
				padding-top: 40rpx;
				display: flex;
				.icon {
					margin-right: 10rpx;
				}

				.intro {
					.name {
						font-size: 32rpx;
						font-weight: 400;
						color: #333333;
						line-height: 40rpx;
					}

					.position {
						margin-left: 10rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #999999;
						line-height: 34rpx;
					}

					.good_at {
						font-size: 24rpx;
						font-weight: 400;
						color: #73737D;
						line-height: 28rpx;
						margin-right: 40rpx;
						padding-top: 10rpx;
					}
				}
			}

			.brand {
				display: flex;
				margin-top: 8rpx;

				.brand_one {
					font-size: 20rpx;
					font-weight: 400;
					color: #EB7637;
					background: #FDE2D2;
					line-height: 45rpx;
					padding: 2rpx 12rpx;
					border-radius: 20rpx;
					margin-right: 24rpx;
				}

				.brand_blue {
					background-color: #EAEFFF;
					color: #3F80FF;
				}

				.brand_good_rate {
					font-size: 24rpx;
					font-weight: 400;
					margin-right: 16rpx;
					color: #73737D;
					line-height: 28rpx;

					.rate_orange {
						color: #EB7637;
						padding-right: 8rpx;
					}
				}

			}

			.hosp_box {
				margin-top: 20rpx;
				//margin-bottom: 30rpx;
				.hosp_list {
					display: flex;
					justify-content: space-between;
					align-items: center;
					background: #F5F6F8;
					margin-right: 32rpx;
					border-radius: 10rpx;
					//margin-bottom: 10rpx;

					.hosp_list_left {
						display: flex;
						align-items: center;
						padding: 20rpx 0 20rpx 12rpx;

						.hosp_list_left_num {
							flex-shrink: 0;
							width: 36rpx;
							height: 36rpx;
							background-color: #F9823A;
							border-radius: 3px;
							font-size: 20rpx;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 28rpx;
							padding: 6rpx 4rpx 4rpx 4rpx;
							text-align: center;
							margin-right: 10rpx;
						}

						.organge {
							background-color: #43C163;
						}

						.hosp_list_left_text {
							display: flex;
							flex-direction: column;
							font-size: 24rpx;
							font-weight: 400;
							color: #333333;
							line-height: 28rpx;

							.hosp_list_left_text_title {
								margin-right: 20rpx;
								line-height: 40rpx;
								.hosp_title_brand {
									margin-right: 10rpx;
									padding: 2rpx 8rpx;
									background: #FBF1EF;
									border: 2rpx solid #E16740;
									border-radius: 4rpx;
									font-size: 20rpx;
									font-weight: 400;
									color: #E16740;
									line-height: 26rpx;
								}
							}

							.hosp_title_dep {
								margin-top: 8rpx;
							}
						}
					}

					.hosp_list_right {
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						line-height: 24rpx;
						padding-right: 14rpx;
					}
				}

			}

			.mark_rightTop {
				position: absolute;
				top: 0;
				right: 0;
				font-size: 20rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 22rpx;
				width: 60rpx;
				height: 30rpx;
				text-align: center;
				background: #43C163;
				padding-top: 8rpx;
				border-radius: 0px 20rpx 0px 20rpx;
			}

			.mark_rightTop_no {
				position: absolute;
				top: 0;
				right: 0;
				font-size: 20rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 22rpx;
				width: 60rpx;
				height: 30rpx;
				text-align: center;
				background: #979797;
				padding-top: 8rpx;
				border-radius: 0px 20rpx 0px 20rpx;
			}
		}

		.empty {
			padding-top: 100rpx;
			padding-bottom: 200rpx;
		}
	}
</style>